import classNames from 'classnames';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Checkbox, Icon, ListView, Modal, Button, Tools } from 'weaver-mobile';
import If, { Else, Then } from '../../../common/if';
import Loading from '../../../common/loading';
import { TIPS_MSG } from '../../../constants/form';

const getLabel = Tools.getLabel; 
const CheckboxItem = Checkbox.CheckboxItem;
const Alert = Modal.alert;

@inject('powerStore')
@withRouter
@observer
export default class Maintain extends React.Component {
  constructor(props) {
    super(props);

    this.appid = props.appid;
    this.store = props.powerStore;
    this.store.getShareList(this.appid);

    this.state = {
      checkList : []
    }
  }

  onCheck = randomFieldId => {
    const { checkList } = this.state;
    const ind = checkList.indexOf(randomFieldId);

    if (ind >= 0) {
      checkList.splice(ind, 1);
    } else {
      checkList.push(randomFieldId);
    }

    this.setState({ checkList });
  }

  deleteShare = () => {
    const { checkList } = this.state;
    const { deleteShare } = this.store;

    if (checkList.length) {
      Alert('', getLabel(523279, '是否删除共享权限'), [
        { text: getLabel(523250, '取消'), },
        { text: getLabel(523269, '确定'), onPress: () => {
          deleteShare(this.appid, checkList).then(
            this.setState({
              checkList: []
            })
          );
        }},
      ])
    }
  }

  addShare = () => {
    this.props.history.push('/form/power/hrmcondition');
  }
  
  renderRow = (rowData) => {
    const { checkList } = this.state;

    return (
      <CheckboxItem  
        key={rowData.randomFieldId} 
        checked={ !!~checkList.indexOf(rowData.randomFieldId) }
        onChange={ () => this.onCheck(rowData.randomFieldId) }
      >
        <li onClick={() => this.onCheck(rowData.randomFieldId)}>
          <Icon type='man-o' />
          <div className='person-info'>
            <span className='person-detail-info'>
              <span>{rowData.sharetypespan}</span>
              { rowData.contentspan ?
                <span>{rowData.contentspan}</span> : null
              }
              { rowData.sec1span ?
                <span>{getLabel(523280, '安全级别')} &nbsp;{rowData.sec1span}</span> : null
              }
            </span>
            <span className={classNames('person-righttype', { 'person-look': rowData.rightType === '1' })}>
              {rowData.rightTypespan}
            </span>
          </div>
        </li>
      </CheckboxItem>
    )};

  render () {
    const { dataSource, onEndReached, mainTainDatas, loading } = this.store;
    const { checkList } = this.state;

    return (
      <div className='edc-mobile-maintain'>
        <If condition={loading} >
          <Then>
            <Loading loading={true} content={TIPS_MSG.LOADING} className='maintain-loading'/>
          </Then>
          <Else>
            <If condition={!mainTainDatas.length} >
              <Then>
                <div className='maintain-no-data'>
                  <Icon type={'no-data'} />
                  <span>{getLabel(523281, '暂无数据')}</span>
                </div>
              </Then>
              <Else>
                <div className='person-list'>
                  <ListView 
                    style={{
                      height: '100%',
                      overflow: 'auto',
                    }}
                    _noOverwrite={true} // 阻止ecode中重写ListView导致报错
                    dataSource={toJS(dataSource)}
                    onEndReachedThreshold={10}
                    onEndReached={onEndReached}
                    renderRow={this.renderRow}
                  />
                </div>
              </Else>
            </If>
          </Else>
        </If>
        <div className='person-opts'>
          <Button
            type='warning' 
            className={classNames('up-condition', { 'no-shanchu': !checkList.length })} 
            onClick={this.deleteShare}
          >
            {getLabel(523271, '删除')}
          </Button>
          <Button 
            className='add-condition'
            onClick={this.addShare}
            type='primary' 
           >
            {getLabel(523282, '新增')}
          </Button>
        </div>
      </div>  
    )
  }
}